/*
 * @Author: duchengdong
 * @Date: 2024-03-11 23:21:25
 * @LastEditors: duchengdong
 * @LastEditTime: 2024-03-14 00:07:59
 * @Description:
 */
import {View, Text, ScrollView, Dimensions} from 'react-native'
import React, {useState, useEffect, useRef} from 'react'
import {StyleSheet} from 'react-native'
import {formatDateTime} from '../../utils'
import {infoColor, successColor, warningColor, errorColor} from '../../global'
import {ButtonGroup} from '@rneui/themed'
// import {LineChart} from 'react-native-gifted-charts'
import * as echarts from 'echarts/core'
import {LineChart, GaugeChart} from 'echarts/charts'
import {
	TitleComponent,
	TooltipComponent,
	GridComponent,
	DatasetComponent,
	TransformComponent,
	LegendComponent,
	VisualMapComponent,
	ToolboxComponent,
	DataZoomComponent,
	GraphicComponent,
	PolarComponent,
	TimelineComponent,
	BrushComponent,
	MarkLineComponent,
	MarkAreaComponent,
	MarkPointComponent,
	SingleAxisComponent,
	ParallelComponent,
	CalendarComponent,
	GeoComponent,
} from 'echarts/components'
import {SVGRenderer, SvgChart} from '@wuba/react-native-echarts'

echarts.use([
	SVGRenderer,
	LineChart,
	GaugeChart,
	TitleComponent,
	TooltipComponent,
	GridComponent,
	DatasetComponent,
	TransformComponent,
	LegendComponent,
	VisualMapComponent,
	ToolboxComponent,
	DataZoomComponent,
	GraphicComponent,
	PolarComponent,
	TimelineComponent,
	BrushComponent,
	MarkLineComponent,
	MarkAreaComponent,
	MarkPointComponent,
	SingleAxisComponent,
	ParallelComponent,
	CalendarComponent,
	GeoComponent,
])

const style = StyleSheet.create({
	container: {
		padding: 10,
		height: '100%',
		backgroundColor: '#fff',
	},
	dateTime: {
		color: infoColor,
		marginBottom: 12,
		fontSize: 20,
	},
})

const E_HEIGHT = 400
const E_WIDTH = Dimensions.get('screen').width

function calcTime(len = 10) {
	let now = new Date()
	let res = []
	while (len--) {
		res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''))
		now = new Date(+now - 5000)
	}
	return res
}

function calcValue(len = 10) {
	let res = []
	while (len--) {
		res.push((Math.random() * 100).toFixed(1) * 1)
	}
	return res
}

export default function Detail() {
	const [selectedIndex, setSelectedIndex] = useState(0)
	const svgRef = useRef(null)
	const [chart, setChart] = useState(null)
	const initial = {
		series: [
			{
				type: 'gauge',
				radius: '100%',
				grid: {
					left: '30',
					right: '30',
					bottom: '0',
				},
				axisLine: {
					lineStyle: {
						width: 25,
						color: [
							[0.3, '#93CE07'],
							[0.7, '#FC7D02'],
							[1, '#AC3B2A'],
						],
					},
				},
				pointer: {
					itemStyle: {
						color: 'auto',
					},
				},
				axisTick: {
					distance: -25,
					length: 8,
					lineStyle: {
						color: '#fff',
						width: 2,
					},
				},
				splitLine: {
					distance: -25,
					length: 25,
					lineStyle: {
						color: '#fff',
						width: 4,
					},
				},
				axisLabel: {
					color: 'inherit',
					distance: 32,
					fontSize: 16,
				},
				detail: {
					valueAnimation: true,
					formatter: '{value} %',
					color: 'inherit',
				},
				data: [
					{
						value: 10,
					},
				],
			},
		],
	}
	const [stageOption, setStageOption] = useState(initial)
	const svgRef2 = useRef(null)

	let interval
	useEffect(() => {
		let chart
		if (svgRef2.current) {
			chart = echarts.init(svgRef2.current, 'light', {
				renderer: 'svg',
				width: 350,
				height: 300,
			})
			chart.setOption(stageOption)
		}
		interval = setInterval(function () {
			stageOption.series[0].data[0].value = +(Math.random() * 100).toFixed(2)
			setStageOption({...stageOption})
			chart.setOption(stageOption)
		}, 2000)

		return () => {
			clearInterval(interval)
			chart?.dispose()
		}
	}, [])

	useEffect(() => {
		const option = {
			tooltip: {
				trigger: 'axis',
			},
			grid: {
				left: '30',
				right: '15%',
				bottom: '10%',
			},
			xAxis: {
				data: calcTime(60),
			},
			yAxis: {
        type: 'value',
        name: '程度(%)',
      },
			dataZoom: [
				{
					startValue: '2024-01-01',
				},
				{
					type: 'inside',
				},
			],
			visualMap: {
				top: 50,
				right: 10,
				pieces: [
					{
						gt: 0,
						lte: 35,
						color: '#93CE07',
					},
					{
						gt: 35,
						lte: 70,
						color: '#FC7D02',
					},
					{
						gt: 70,
						color: '#AC3B2A',
					},
				],
				outOfRange: {
					color: '#999',
				},
			},
			series: {
				name: '疲劳程度',
				type: 'line',
				data: calcValue(60),
				symbol: 'none',
				markLine: {
					silent: true,
					lineStyle: {
						color: '#333',
					},
					data: [
						{
							yAxis: 35,
						},
						{
							yAxis: 70,
						},
					],
				},
			},
		}
		let chart
		if (svgRef.current) {
			chart = echarts.init(svgRef.current, 'light', {
				renderer: 'svg',
				width: E_WIDTH,
				height: E_HEIGHT,
			})
			chart.setOption(option)
		}
		setChart(chart)
		return () => chart?.dispose()
	}, [])

	const changeType = type => {
		if (type == selectedIndex) return
		setSelectedIndex(type)
		let categories = []
		let data = []
		if (type == 0) {
			categories = calcTime(60)
			data = calcValue(60)
		}
		if (type == 1) {
			categories = calcTime(120)
			data = calcValue(120)
		}
		if (type == 2) {
			categories = calcTime(180)
			data = calcValue(180)
		}
		chart.setOption({
			xAxis: [{data: categories}],
			series: [{data: data}],
		})
	}

	return (
		<ScrollView style={style.container}>
			<View style={{marginBottom: 20}}>
				<View>
					<Text style={style.dateTime}>{formatDateTime()}</Text>
				</View>
				<View>
					<Text style={{fontSize: 18, color: '#333'}}>
						疲劳程度：<Text style={{fontSize: 26, color: errorColor}}>80</Text>%
					</Text>
				</View>
			</View>
			<View>
				<SvgChart ref={svgRef2}></SvgChart>
			</View>
			<View>
				<View>
					<Text style={{fontSize: 18, color: '#333', marginBottom: 20}}>疲劳程度趋势</Text>
				</View>
				<ButtonGroup
					buttons={['日', '月', '年']}
					selectedIndex={selectedIndex}
					onPress={value => {
						changeType(value)
					}}
				/>
			</View>
			<View style={{paddingBottom: 30}}>
				<SvgChart ref={svgRef}></SvgChart>
			</View>
		</ScrollView>
	)
}
